{% extends "base_generic.html" %}

{% block content %}
  <h1>Book List</h1>
  <form method="get" class="mb-4">
    <div class="input-group" style="max-width:400px;">
      <input type="text" name="q" class="form-control" placeholder="Search by title or author" value="{{ q }}">
      <button class="btn btn-primary" type="submit">Search</button>
    </div>
  </form>
  {% if book_list %}
    <div class="row row-cols-1 row-cols-md-3 g-4">
      {% for book in book_list %}
      <div class="col">
        <div class="card h-100 shadow-sm">
          {% if book.cover_url %}
            <img src="{{ book.cover_url }}" class="card-img-top" alt="{{ book.title }}" style="height:220px;object-fit:cover;">
          {% else %}
            <div style="height:220px;display:flex;align-items:center;justify-content:center;background:#e3f2fd;">
              <span class="text-muted">No Cover</span>
            </div>
          {% endif %}
          <div class="card-body">
            <h5 class="card-title">{{ book.title }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ book.author }}</h6>
            <p class="card-text" style="font-size:0.95em;">{{ book.summary|truncatechars:60 }}</p>
            {% if book.avg_rating %}
              <div class="mb-1"><span class="badge bg-warning text-dark">★ {{ book.avg_rating|floatformat:1 }}</span></div>
            {% endif %}
            <a href="{{ book.get_absolute_url }}" class="btn btn-outline-primary btn-sm">Details</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% if is_paginated %}
      <nav class="mt-4">
        <ul class="pagination">
          {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?q={{ q }}&page=1">&laquo; First</a></li>
            <li class="page-item"><a class="page-link" href="?q={{ q }}&page={{ page_obj.previous_page_number }}">Previous</a></li>
          {% endif %}
          <li class="page-item active"><span class="page-link">{{ page_obj.number }}</span></li>
          {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?q={{ q }}&page={{ page_obj.next_page_number }}">Next</a></li>
            <li class="page-item"><a class="page-link" href="?q={{ q }}&page={{ page_obj.paginator.num_pages }}">Last &raquo;</a></li>
          {% endif %}
        </ul>
      </nav>
    {% endif %}
  {% else %}
    <p>There are no books in the library.</p>
  {% endif %}
{% endblock %}

